import { styled } from "styled-components";

export const HeaderCenterWrapper = styled.div`
  /* display: flex;
  align-items: center; */
  
  .search{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 300px;
    height: 48px;
    cursor: pointer;
    border: 1px solid #eee;
    border-radius: 24px;
    box-sizing: border-box;
    ${props => props.theme.mixin.boxShadow}
    padding: 0 8px;
    
    .text {
      padding: 0 16px;
      color: ${props => props.theme.text.secondaryColor}
    }

    .icon {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      color: #fff;
      background-color: ${props => props.theme.color.primaryColor}
    }
  }

`